<!--
 * @Author: xiaotiwen
 * @Date: 2020-06-17 10:19:49
 * @LastEditTime: 2020-07-11 01:02:14
 * @LastEditors: xiaotiwen
 * @FilePath: \eduweb\src\views\practiceManagement\courseConfirmation\index.vue
 * @Description:  课程确认管理
-->

<template>
    <!-- 课程确认管理-->
    <div>
        <InnerBreadcrumb v-model="indexKey" :path="breadPath"></InnerBreadcrumb>
        <div v-if="indexKey === '0'">
            <condition-card
                shadow="never"
                label-width="120px"
                @search="onSubmit"
                @reset="reset('queryForm')"
            >
                <el-row :gutter="24">
                    <el-col :span="8">
                        <el-form-item :label="$t('label.schoolTerm')">
                            <CalendarSelect
                                v-model="queryForm.yearTerm"
                                @load-done="loadDone"
                            ></CalendarSelect>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item :label="$t('label.grade')">
                            <el-date-picker
                                v-model="queryForm.grade"
                                value-format="yyyy"
                                type="year"
                                :placeholder="$t('message.plzSelect')"
                                style="width: 100%"
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item :label="$t('label.trainingLevel')">
                            <el-select
                                v-model="queryForm.trainingLevel"
                                :placeholder="$t('message.plzSelect')"
                                style="width:100%"
                                :disabled="true"
                            >
                                <el-option
                                    :label="$t('courseConfirmation.udg')"
                                    value="UDG"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="24">
                    <el-col :span="8">
                        <el-form-item :label="$t('fundingManagement.label.courseOpenAcademy')">
                            <DictSelect
                                v-model="queryForm.courseOpenAcademyId"
                                :data="options.courseOpenAcademyId"
                                :clearable="false"
                                :filterable="true"
                            ></DictSelect>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item :label="$t('courseConfirmation.label.stuFaculty')">
                            <DictSelect
                                v-model="queryForm.studentAcademyId"
                                :data="options.studentAcademyId"
                                :clearable="false"
                                :filterable="true"
                            ></DictSelect>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item :label="$t('label.major')">
                            <MyMajor
                                :faculty="queryForm.studentAcademyId"
                                v-model="queryForm.majorId"
                                :grade="queryForm.grade"
                            ></MyMajor>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="24">
                    <el-col :span="8">
                        <el-form-item :label="$t('courseConfirmation.label.plan')">
                            <el-select
                                v-model="queryForm.sameAsPlan"
                                :placeholder="$t('message.plzSelect')"
                                style="width:100%"
                            >
                                <el-option :label="$t('message.yes')" value="Y"></el-option>
                                <el-option :label="$t('message.no')" value="N"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
            </condition-card>
            <el-card shadow="never" body-style="padding: 24px;">
                <h2 class="titles">{{ $t('courseConfirmation.title.ListTitle') }}</h2>
                <div class="edu-opertion-bar">
                    <div class="float-left">
                        <KeywordInput v-model="queryForm.course" :placeholder="$t('courseConfirmation.tips.keyTips')" @enter="handSearchChang"></KeywordInput>
                        <!-- <el-input
                            style="width: 200px;"
                            v-model="queryForm.course"
                            :placeholder="$t('courseConfirmation.tips.keyTips')"
                            prefix-icon="el-icon-search"
                            @keyup.enter.native="handSearchChang"
                        /> -->
                    </div>

                    <div class="float-right">
                        <el-button v-if="menuAuths.exportBut" type="primary" @click="exportRecord">
                            {{ $t('message.export') }}
                        </el-button>
                        <el-button v-if="menuAuths.updateBut" type="primary" @click="modify">
                            {{ $t('message.edit') }}
                        </el-button>
                        <el-button v-if="status" type="primary" @click="addCourse">
                            {{ $t('courseConfirmation.label.confirmUpdate') }}
                        </el-button>
                        <el-button v-if="status" @click="cancel">
                            {{ $t('message.cancel') }}
                        </el-button>
                    </div>
                </div>

                <!-- @row-click="rowClick"  -->
                <el-table
                    ref="tables"
                    :data="data"
                    @selection-change="selectionChange"
                    @expand-change="zydescription"
                    :row-class-name="setClassName"
                    :row-key="getRowKeys"
                    :expand-row-keys="expands"
                >
                    <el-table-column
                        fixed="left"
                        width="30"
                        type="selection"
                        :selectable="selectable"
                    ></el-table-column>
                    <el-table-column
                        fixed="left"
                        width="50"
                        align="center"
                        type="index"
                        :index="indexMethod"
                        :label="$t('message.order')"
                    ></el-table-column>
                    <el-table-column
                        :label="$t('label.schoolTerm')"
                        show-overflow-tooltip
                        prop="yearTermText"
                        min-width="190"
                        sortable
                    ></el-table-column>
                    <el-table-column
                        :label="$t('label.grade')"
                        show-overflow-tooltip
                        prop="grade"
                        min-width="90"
                        sortable
                    ></el-table-column>
                    <el-table-column
                        :label="$t('fundingManagement.label.courseCode')"
                        show-overflow-tooltip
                        prop="courseCode"
                        min-width="100"
                        sortable
                        fixed='left'
                    ></el-table-column>
                    <el-table-column
                        :label="$t('fundingManagement.label.courseName')"
                        show-overflow-tooltip
                        prop="courseName"
                        min-width="130"
                        sortable
                        fixed='left'
                    ></el-table-column>
                    <el-table-column
                        :label="$t('label.openClassCollege')"
                        show-overflow-tooltip
                        prop="courseOpenAcademy"
                        min-width="150"
                        sortable
                    ></el-table-column>
                    <el-table-column
                        :label="$t('courseConfirmation.label.stuFaculty')"
                        show-overflow-tooltip
                        prop="studentAcademy"
                        min-width="130"
                        sortable
                    ></el-table-column>
                    <el-table-column
                        :label="$t('label.major')"
                        show-overflow-tooltip
                        prop="majorName"
                        min-width="150"
                        sortable
                    ></el-table-column>
                    <el-table-column
                        :label="$t('label.trainingLevel')"
                        show-overflow-tooltip
                        prop="trainingLevelText"
                        min-width="100"
                    ></el-table-column>
                    <el-table-column
                        :label="$t('courseConfirmation.label.weeks')"
                        show-overflow-tooltip
                        prop="weeks"
                        sortable
                        min-width="100"
                    ></el-table-column>
                    <el-table-column
                        :label="$t('courseConfirmation.label.confirmWeeks')"
                        show-overflow-tooltip
                        sortable
                        min-width="100"
                    >
                        <template slot-scope="scope">
                            <span
                                v-if="
                                    !status ||
                                        scope.row.betweenTimeLimit === 'N' ||
                                        scope.row.isPlace === 'Y'
                                "
                            >
                                {{ scope.row.confirmWeeks }}
                            </span>
                            <div
                                v-if="
                                    status &&
                                        scope.row.betweenTimeLimit === 'Y' &&
                                        scope.row.isPlace === 'N'
                                "
                            >
                                <el-input v-model="scope.row.confirmWeeks" maxlength="4"></el-input>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column
                        :label="$t('courseConfirmation.label.planCount')"
                        prop="planCount"
                        show-overflow-tooltip
                        sortable
                        min-width="120"
                    ></el-table-column>
                    <el-table-column
                        :label="$t('courseConfirmation.label.confirmCount')"
                        show-overflow-tooltip
                        sortable
                        min-width="100"
                    >
                        <template slot-scope="scope">
                            <span
                                v-if="
                                    !status ||
                                        scope.row.betweenTimeLimit === 'N' ||
                                        scope.row.isPlace === 'Y'
                                "
                            >
                                {{ scope.row.confirmCount }}
                            </span>
                            <div
                                v-if="
                                    status &&
                                        scope.row.betweenTimeLimit === 'Y' &&
                                        scope.row.isPlace === 'N'
                                "
                            >
                                <el-input v-model="scope.row.confirmCount" maxlength="4"></el-input>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column
                        :label="$t('courseConfirmation.label.plan')"
                        show-overflow-tooltip
                        min-width="120"
                    >
                        <template slot-scope="scope">
                            <span v-if="scope.row.sameAsPlan === 'Y'">{{ $t('message.yes') }}</span>
                            <span v-if="scope.row.sameAsPlan === 'N'">{{ $t('message.no') }}</span>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="edu-pagination">
                    <div class="float-right">
                        <el-pagination
                            :current-page="page.pageNum_"
                            :page-sizes="[20, 50, 100, 500, 1000]"
                            :page-size="page.pageSize_"
                            :total="page.total"
                            layout="total, sizes, prev, pager, next, jumper"
                            style="float: right;margin:0;"
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                        />
                    </div>
                </div>
            </el-card>
        </div>
    </div>
</template>

<script>
import { findDept } from 'common/src/api/user'
import commonMixins from '../commonMixins'
import {
    listDdetails,
    unionCourses,
    cancelUnion,
    cancelDdivide,
    divideClass
} from 'common/src/api/practiceManagement/practiceTask'
import {
    deleudgPtCourse,
    initCourse,
    exportUdgptCourseInfo,
    updateConfirm,
    getCourseConfirmationList,
    exportUdgptCourseInfoNew
} from 'common/src/api/practiceManagement/internSetup'
import MyMajor from 'common/src/views/practiceManagement/common/MyMajor'
export default {
    // 组件名称
    name: 'courseList',
    mixins: [commonMixins],
    components: {
        MyMajor
    },
    // 组件参数 接收来自父组件的数据
    props: {},
    // 组件状态值
    data() {
        return {
            initializeDialog: false,
            status: false,
            indexKey: '0',
            yearTerms: '',
            breadPath: {
                label: this.$t('courseConfirmation.label.pathLabel'),
                key: '0',
                children: [
                    {
                        key: '1',
                        label: this.$t('courseConfirmation.label.pathAdd')
                    }
                ]
            },

            ids: '',
            selecids: [],
            cultureSchemes: [],
            page: {
                pageNum_: 1,
                pageSize_: 20,
                total: 0
            },
            getRowKeys(row) {
                return row.id
            },
            expands: [],
            data: [],
            queryForm: {
                yearTerm: '', // 学年学期
                grade: '', // 年级
                trainingLevel: 'UDG', // 培养层次
                faculty: '', // 学院院系
                profession: '', // 专业
                course: '', // 课程代码或名称
                sameAsPlan: '' // 是否和计划一致，Y：一致N：不一致
            },
            searchForm: {
                yearTerm: '', // 学年学期
                grade: '' // 年级
            },
            exportData: {}, //导出类型：0：根据条件导出，1：导出勾选条件
            exportCondition: {},
            // 下拉相关选项数据
            options: {
                trainingLevel: [], // 培养层次
                studentAcademyId: [], // 学院院系
                courseOpenAcademyId:[],//开课院系
                majorId: [] // 专业
            },
            auths: [],
            menuAuths: {
                updateBut: false,
                exportBut: false
            }
            // rules: [
            //     funds: [{ pattern: /^[+]{0,1}(\d+)$/, message: '请输入正整数', trigger: ['blur'] }]
            // ]
        }
    },
    watch: {
        auths: {
            handler(newVal) {
                if (newVal && Array.isArray(newVal) && newVal.length > 0) {
                    newVal.some(item => {
                        if(item.authCode === 'courseConfirmation-update'){
                            this.menuAuths.updateBut = true
                        }
                        if(item.authCode === 'courseConfirmation-export'){
                            this.menuAuths.exportBut = true
                        }
                    })
                }
            }
        }
    },
    created() {
        this.auths = JSON.parse(localStorage.getItem('sessiondata')).auths
    },
    /**
     * 在挂载开始之前被调用：相关的 render 函数首次被调用。
     */
    mounted() {
        let param = {
            X_PYCC: 'trainingLevel', // 培养层次
            X_YX: 'courseOpenAcademyId' // 学院
        }
        this.initOptions(param)
        findDept(0).then(res => {
            if (res.code == 200 && res.data) {
                this.options.studentAcademyId = res.data.map(row => {
                    return { label: row.deptName, value: row.deptCode }
                })
            }
        })
    },

    methods: {
        selectionChange(selection) {
            this.cultureSchemes = selection
            this.selecids = selection.map(item => {
                return item.id
            })
        },
        zydescription(row) {
            // 获取展开数据
            let param = {
                id: row.id
            }
            if (!row.hasOwnProperty('children')) {
                listDdetails(param).then(res => {
                    this.$set(row, 'children', res.data)
                    this.expands = [row.id]
                })
            }
        },
        setClassName({ row }) {
            // 是否有展开项
            if (
                row.mergeFlag !== 'Y' &&
                (row.confirmCount !== row.planCount || row.weeks !== row.confirmWeeks)
            ) {
                name = 'unexpand warning-red'
            } else if (
                row.mergeFlag !== 'Y' &&
                row.confirmCount === row.planCount &&
                row.weeks === row.confirmWeeks
            ) {
                name = 'unexpand'
            } else if (
                row.mergeFlag === 'Y' &&
                (row.confirmCount !== row.planCount || row.weeks !== row.confirmWeeks)
            ) {
                name = ('', 'warning-red')
            } else if (
                row.mergeFlag === 'Y' &&
                row.confirmCount === row.planCount &&
                row.weeks === row.confirmWeeks
            ) {
                name = ''
            }
            return name
        },
        rowClick(row) {
            // 单项选择
            this.$refs.tables.toggleRowSelection(row)
        },

        handleSizeChange(val) {
            // 分页数量事件
            this.$set(this.page, 'pageSize_', val)
            this.getLists()
        },
        handleCurrentChange(val) {
            // 分页当前页事件
            this.$set(this.page, 'pageNum_', val)
            this.getLists()
        },
        handSearchChang() {
            // 搜索
            this.getLists(true)
        },

        // 重置
        reset() {
            for (const key in this.queryForm) {
                if (key != 'calendarId' && key != 'projectId') this.queryForm[key] = ''
            }
            this.queryForm.yearTerm = this.yearTerms
            this.queryForm.trainingLevel = 'UDG'
            this.getLists(true)
        },
        onSubmit() {
            // 筛选
            this.getLists(true)
        },
        getLists(refresh) {
            // 获取数据
            this.expands = []
            if (refresh) {
                this.page.pageNum_ = 1
            }
            let jsons = {
                condition: this.queryForm,
                pageNum_: this.page.pageNum_,
                pageSize_: this.page.pageSize_
            }
            getCourseConfirmationList(jsons).then(res => {
                this.data = res.data.list
                this.page.total = res.data.total_
            })
        },
        initialize() {
            this.status = true
        },

        addCourse() {
            if (this.cultureSchemes.length < 1) {
                this.$message({
                    type: 'error',
                    message: this.$t('courseConfirmation.tips.plzSelect')
                })
                return
            } else {
                // for (let i = 0; i < this.cultureSchemes.length; i++) {
                //   if (this.cultureSchemes[i].isPlace === 'Y') {
                //     this.$message({ type: "error", message: "存在已分班的课程，请重新勾选" });
                //     return;
                //   }
                // }
            }
            let flag1 = false
            let flag2 = false
            let flags = this.cultureSchemes.some(item => {
                let reg = /^((0{1}\.\d{1})|([1-9]\d*\.{1}\d{1})|([1-9]+\d*))$/
                let reg1 = /^[1-9]\d*$/
                if (item.confirmCount && !reg1.test(item.confirmCount)) {
                    flag1 = true
                }
                if (item.confirmWeeks && !reg.test(item.confirmWeeks)) {
                    flag2 = true
                }
                return flag1 || flag2
            })
            if (flags) {
                let message = this.$t('practiceManagement.tips.confirmCheckNumTip')
                // flag1 ? '' : (message = this.$t('courseConfirmation.tips.plzSignificant'))
                this.$message({ message: message, type: 'warning' })
                return
            }
            this.$confirm(
                this.$t('courseConfirmation.tips.areYouSureUpdate'),
                this.$t('message.prompt'),
                {
                    confirmButtonText: this.$t('message.confirm'),
                    cancelButtonText: this.$t('message.cancel'),
                    type: 'warning'
                }
            )
                .then(() => {
                    updateConfirm(this.cultureSchemes).then(res => {
                        if (res.code === 200) {
                            this.$message({
                                type: 'success',
                                message: this.$t('message.editSuccess')
                            })
                            this.status = false
                            this.getLists(false)
                        }
                    })
                })
                .catch(e => {})
        },
        //取消对话框
        cancel() {
            this.indexKey = '0'
        },

        exportRecord(type) {
            this.exportCondition = this.queryForm
            if (this.cultureSchemes.length < 1) {
                this.exportData = {
                    exportType: 0,
                    exportCondition: this.exportCondition
                }
            } else {
                this.exportData = {
                    exportType: 1,
                    rows: this.cultureSchemes,
                    exportCondition: this.exportCondition
                }
            }
            // exportUdgptCourseInfo(this.exportData);
            exportUdgptCourseInfoNew(this.exportData)
        },
        modify() {
            this.status = true
        },
        cancel() {
            this.status = false
            this.getLists(true)
        },
        // 禁止表格多选
        selectable(row) {
            // if (row.isPlace === 'Y') {
            //   return false;
            // } else {
            //   return true;
            // }
            return true
        },
        loadDone() {
            this.yearTerms = this.queryForm.yearTerm
            this.getLists()
        },
        indexMethod(index) {
          return (this.page.pageNum_ - 1) * this.page.pageSize_ + index + 1;
        }
    }
}
</script>
<style lang="scss" scoped>
.titles {
    font-weight: bold;
    color: #2b3b4e;
}
.expandTable {
    ::v-deep td {
        border: none;
    }
    .el-table::before {
        width: 0;
        height: 0;
    }
}
.opreate {
    display: flex;
    justify-content: space-between;
}
::v-deep.unexpand .el-table__expand-column .cell {
    display: none;
}
.edu-page-box {
    display: flex;
}
.edu-page-title {
    width: 120px;
    font-size: 18px;
    font-weight: 600;
}
</style>
<style >
.el-table .warning-red,
.warning-red .el-input__inner {
    color: red !important;
}
</style>

